<template>
	<view>
		<Header v-if="cate == 2" :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<Header v-else :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content">
			<bjx-form class="form" :rules="rules" :form="formData" ref="form">
				<view class="mobile-login">
					<bjx-form-item class="mobile-login-mobile" label-type="inline" prop="mobile" label="手机号码">
						<view slot="label">
							<text style="margin-left:6rpx;">手机号</text>
							<!-- <image class="mobile-login-mobile-img" src="@/static/images/iphone.png" mode=""></image> -->
						</view>
						<input class="mobile-login-mobile-content" type="text" value="" placeholder="请输入手机号码"
							v-model="formData.mobile" name="mobile" maxlength="300" />
					</bjx-form-item>

					<bjx-form-item class="mobile-login-code" label-type="inline" prop="code" label="短信验证码">
						<view slot="label">
							<text style="margin-left:6rpx;">验证码</text>
							<!-- <image class="mobile-login-code-img" src="@/static/images/yanzhengma.png" mode=""></image> -->
						</view>
						<view class="get-mobile-code">
							<input class="mobile-login-code-content" type="text" value="" placeholder="请输入验证码"
								v-model="formData.code" name="code" maxlength="300" />
							<text class="mobile-login-code-btn" @tap="getCode">{{codeTip}}</text>
						</view>

					</bjx-form-item>
					<bjx-form-item class="user-login-pwd" label-type="inline" prop="password" label="密码">
						<view slot="label">
							<text style="margin-left:6rpx;">新密码</text>
							<!-- <image class="user-login-pwd-img" src="@/static/images/mima.png" mode=""></image> -->
						</view>
						<input class="user-login-pwd-content" :type="passwordType1" value="" :placeholder="placeholder1"
							v-model="password" name="password" :style="{fontSize: passwordFontSize1}" />
						<image class="isdisplaymima" v-if="!isDisplay1" src="@/static/images/biyan.png"
							@tap="translateMima1(1)" alt="">
							<image class="isdisplaymima" v-else src="@/static/images/zhengyan.png"
								@tap="translateMima1(2)" alt="">
					</bjx-form-item>

					<bjx-form-item class="user-login-pwd" label-type="inline" prop="password" label="密码">
						<view slot="label">
							<text style="margin-left:6rpx;">新密码</text>
							<!-- <image class="user-login-pwd-img" src="@/static/images/mima.png" mode=""></image> -->
						</view>
						<input class="user-login-pwd-content" :type="passwordType2" value="" :placeholder="placeholder2"
							v-model="repassword" name="repassword" :style="{fontSize: passwordFontSize2}" />
						<image class="isdisplaymima" v-if="!isDisplay2" src="@/static/images/biyan.png"
							@tap="translateMima2(1)" alt="">
							<image class="isdisplaymima" v-else src="@/static/images/zhengyan.png"
								@tap="translateMima2(2)" alt="">
					</bjx-form-item>
				</view>
				<view class="tijiao" @tap="confirmSubmit" :style="{backgroundColor:backgroundColor}">
					确&nbsp;&nbsp;定
				</view>
			</bjx-form>
			<view class="tips">
				<text class="tips-title">如何设置可靠的密码？</text>
				<text class="tips-content1">1、密码长度为6位数以上</text>
				<text class="tips-content2">2、密码中只能包含数字、大小写字母等</text>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '重置密码',
				codeTip: '获取验证码',
				numShow: false,
				second: 60,
				backgroundColor: '#f3431a',
				cate: 1,
				noClick: true,
				isDisplay1: false,
				isDisplay2: false,
				passwordType1: 'password',
				passwordType2: 'password',

				passwordFontSize1: '32rpx',
				passwordFontSize2: '32rpx',
				placeholder1: '请输入密码',
				placeholder2: '请再次输入密码',
				password: '',
				repassword: '',

				formData: {
					mobile: '',
					code: '',
					password: '',
					repassword: ''
				},
				rules: {
					mobile: {
						required: true,
						rule: 'length:11',
						message: {
							reg: '请填写正确格式的手机号码'
						}
					},
					code: {
						required: true,
						rule: 'type:string',
						message: {
							type: '短信验证码不能为空'
						}
					},
					password: {
						required: true,
						rule: 'type:string|length:6,20',
						message: {
							length: '密码为6-20个字符'
						}
					},
					repassword: {
						required: true,
						rule: 'type:string|length:6,20',
						message: {
							length: '确认密码为6-20个字符'
						}
					}
				}
			}
		},
		components: {

		},

		watch: {
			password(newPassword, oldPassword) {
				this.formData.password = newPassword;
				if (newPassword) {
					this.passwordFontSize1 = this.isDisplay1 == true ? '32rpx' : '50rpx'
					this.placeholder1 = ''
				} else {
					this.passwordFontSize1 = '32rpx'
					this.placeholder1 = '请输入密码'
				}
			},
			repassword(newPassword, oldPassword) {
				this.formData.repassword = newPassword;
				if (newPassword) {
					this.passwordFontSize2 = this.isDisplay2 == true ? '32rpx' : '50rpx'
					this.placeholder2 = ''
				} else {
					this.passwordFontSize2 = '32rpx'
					this.placeholder2 = '请再次输入密码'
				}
			},
		},

		onLoad(option) {
			// console.log(option)
			this.cate = option.cate;
			// switch (this.cate) {
			// 	case '1':
			// 		this.backgroundColor = '#f3431a';
			// 		break;
			// 	case '2':
			// 		this.backgroundColor = '#0083ff';
			// 		break;
			// }
		},
		methods: {

			async translateMima1(type) {
				switch (type) {
					case 1:
						this.passwordFontSize1 = '32rpx'
						this.isDisplay1 = true;
						this.passwordType1 = 'text';
						break;
					case 2:
						this.passwordFontSize1 = this.placeholder1 == '' ? '50rpx' : '32rpx'
						this.isDisplay1 = false;
						this.passwordType1 = 'password';
						break;
				}
			},

			async translateMima2(type) {
				switch (type) {
					case 1:
						this.passwordFontSize2 = '32rpx'
						this.isDisplay2 = true;
						this.passwordType2 = 'text';
						break;
					case 2:
						this.passwordFontSize2 = this.placeholder2 == '' ? '50rpx' : '32rpx'
						this.isDisplay2 = false;
						this.passwordType2 = 'password';
						break;
				}
			},

			//个人/企业
			async version(id) {
				this.cate = id;
				// switch (id) {
				// 	case 1:
				// 		this.perActive = true;
				// 		this.comActive = false;
				// 		break;
				// 	case 2:
				// 		this.perActive = false;
				// 		this.comActive = true;
				// 		break;
				// }
			},

			async getCode() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					return false;
				}
				if (this.numShow == true) {
					this.$api.msg(this.second + 's之内不可再次发送');
					return false;
				}
				if (!this.formData.mobile) {
					this.$api.msg('请输入手机号码');
					return false;
				}

				let res = await this.$myRequest({
					url: '/getCode/' + this.formData.mobile
				})

				this.$api.msg(res.data.msg, 'success')
				this.codeTip = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.codeTip = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.codeTip = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)
			},

			confirmSubmit() {
				this.$refs.form.validate(val => {
					if (val == true) {
						for (let i = 0; i < this.formData.password.length; i++) {
							let newWord = this.formData.password.substr(i, 1);
							if (!/[0-9a-zA-Z]/.test(newWord)) {
								this.$api.msg('密码只能输入大小写字母和数字');
								return false;
							}
						}
						if (this.formData.password !== this.formData.repassword) {
							this.$api.msg('登录密码和确认密码不一致！');
						}
						let dataObj = {
							mobile: this.formData.mobile,
							code: this.formData.code,
							password: this.formData.password
						};
						this.submit(dataObj);
					}
				})
			},

			//登录提交
			async submit(dataObj) {
				let url = '/resetUserPwd';
				if (this.cate == 2) {
					url = '/resetComPwd';
				}
				let res = await this.$myRequest({
					url: url,
					data: dataObj,
					methods: 'post'
				})
				// console.log(res);
				this.$api.msg(res.data.msg, 'success', 1000);
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login?cate=' + this.cate
					})
				}, 1000)

			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-lg;
	}
</style>
<style lang="scss" scoped>
	.head-img {
		height: 248rpx;
		width: 100%;
	}

	.content {
		// #ifdef H5
		margin-top: 125rpx;
		// #endif
		// #ifdef APP-PLUS
		margin-top: 175rpx;
		// #endif
		
		// #ifdef MP-WEIXIN
		margin-top: 149rpx;
		// #endif

		.mobile-login {
			border-top: 1px solid #f3f3f6;
			height: 324rpx;

			.mobile-login-mobile {
				height: 82rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f3f3f6;
				background-color: #fff;

				.mobile-login-mobile-img {
					width: 23rpx;
					height: 35rpx;
					margin-right: 24rpx;
				}


				.mobile-login-mobile-content {
					display: inline-flex;
					align-items: center;
					font-size: $font-lg;
					border: none;

				}

			}

			.mobile-login-code {
				width: 100%;
				height: 82rpx;
				// line-height: 78rpx;
				padding: 0 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f3f3f6;
				background-color: #fff;
				position: relative;

				.mobile-login-code-img {
					width: 23rpx;
					height: 35rpx;
					margin-right: 24rpx;
				}

				.get-mobile-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;


					.mobile-login-code-content {
						display: inline-flex;
						align-items: center;
						font-size: $font-lg;
						border: none;
						width: 80%;
					}

					.mobile-login-code-btn {
						position: absolute;
						right: 30rpx;
						background-color: #ee7f06;
						border-radius: 8rpx;
						color: #fff;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 20rpx;
						margin-right: 20rpx;
						font-size: $font-base;
					}
				}

			}

			.user-login-pwd {
				position: relative;
				height: 82rpx;
				// line-height: 78rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #f3f3f6;
				background-color: #fff;

				.user-login-pwd-img {
					width: 23rpx;
					height: 35rpx;
					margin-right: 24rpx;
				}

				.user-login-pwd-content {
					display: inline-flex;
					align-items: center;
					font-size: $font-lg;
					border: none;
					color: #000;
					width: 70%;
				}
			}
		}

		.tips {
			padding: 0 35rpx;
			margin-top: 15rpx;
			line-height: 44rpx;
			width: 100%;
			color: #666666;
			font-size: $font-base;

			.tips-title {
				line-height: 54rpx;
				height: 54rpx;
				color: #333333;
				display: block;
				// font-size: $font-base;
			}

			.tips-content1,
			.tips-content2 {
				display: block;
			}

		}

		.tijiao {
			margin-top: 66rpx;
			background-color: #f3431a;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 15rpx;
			color: #fff;
			// letter-spacing: 16rpx;
			/* font-weight: bold; */
		}

	}

	.isdisplaymima {
		width: 38rpx;
		height: 30rpx;
		position: absolute;
		right: 100rpx;
		top: 32rpx;
	}

	.active {
		background-color: #f3431a !important;
		color: #fff !important;
	}

	.bjx-form-item .label-inline {
		width: 100%;
	}
</style>
